<template>
  <div>
       <TitHead tit='考勤'><van-icon name="card" @click="rili"/></TitHead>
       <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @click="clickEvent"> 
           <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationError='locationError' @locationSuccess='locationSuccess'></bm-geolocation> 
       </baidu-map>
       <div class="riqi">
           <p class="week">{{week}}</p>
           <div class="fiex">
               <div class="chi">{{riqi}}</div>
               <div class="chis">{{nl}}</div>
               <div class="chi">今日班次为白班</div>
           </div>
       </div>
       <div class="chidao" v-if="Isq">
           <p>{{isCd?'迟到了：':'距离迟到还有:'}}</p>
           <div>{{time}}</div>
       </div>
       <div class="qianDao" v-else>
           <div class="fiex">
               <div class="chi week size">10:00</div>
               <div class="chis week size">上班<span>{{qianTime}}</span></div>
               <div class="chi shen">申诉</div>
           </div>
       </div>
       <div>
           <van-tabs v-model="active" background=' rgb(245, 245, 245)'>
                <van-tab title="签到">
                    <div class="qian" @click="qiand">{{qiandao}}</div>
                </van-tab>
                <van-tab title="请假">
                    <div class="qian" @click="qj">请假</div>
                </van-tab>
           </van-tabs>
       </div>
  </div>
</template>

<script>
import TitHead from '../../components/TitHead' 
import api from '../../api'
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '86UdP8hPkCWlH9L2ZlKeTkO1BBkEp6u3'
})
export default {
name:'Attendance',
components:{
    TitHead
},
    data(){
        return{
            Isq:true,
            qianTime:'',
            isQd:true,
            qiandao:'签到',
            active: 2,
             center: {lng: 0, lat: 0},
             zoom: 15,
             locData:{
                longitude:'',
                latitude:'',
                address:'',
                },
            week:'',
            year:'',
            mounth:'',
            day:'',
            riqi:'',
            nl:'',
            time:'',
            isCd:false
        }
    },
    methods: { 
        rili(){
            this.$router.push('/calendar')
        },
        getTime(){
            var date=new Date()
            var week=date.getDay()
            var weekArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
            this.week=weekArr[week]
            this.year=date.getFullYear()
            var mounth=date.getMonth()+1
            this.mounth=mounth
            this.day=date.getDate()
            var riqi=date.getFullYear()+'年'+mounth+'月'+date.getDate()+'日'
            this.riqi=riqi
            console.log(riqi);
        },
         handler ({BMap, map}) {
            // console.log(BMap, map)
            // this.center.lng = 39.77784338659052 
            // this.center.lat = 116.56061626471465
            // this.zoom = 15


            let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
            let geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                console.log(r);
                _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
                _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};  // 自定义覆盖物
                _this.initLocation = true;
            },{enableHighAccuracy: true})
            window.map = map;
         },
         //点击地图监听
        clickEvent(e){
            map.clearOverlays();
            let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 25)});
            let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
            map.addOverlay(myMarker);
            //用所定位的经纬度查找所在地省市街道等信息
            let point = new BMap.Point(e.point.lng, e.point.lat);
            let gc = new BMap.Geocoder();
            let _this = this;
            gc.getLocation(point, function (rs) {
                console.log(rs);
                let addComp = rs.addressComponents;
                _this.locData.address = rs.address;

            });
            this.locData.longitude = e.point.lng;
            this.locData.latitude = e.point.lat;
            // console.log(e);
        },
         locationSuccess(point, AddressComponent, marker){
            //  console.log(point,AddressComponent);
             var weizhi=point.addressComponent.city+point.addressComponent.district+point.addressComponent.street+point.addressComponent.streetNumber
            //  console.log(weizhi);
         },
         locationError(StatusCode){
            //  console.log(StatusCode);
         },

        //获取位置
        get(){
            // console.log(1111);
            // console.log(navigator.geolocation);
            if (navigator.geolocation) {
            var n = navigator.geolocation.getCurrentPosition(function(res){
              //  console.log(res.coords.latitude,res.coords.longitude); // 需要的坐标地址就在res中
                 this.locData.longitude = res.coords.longitude;
                 this.locData.latitude = res.coords.latitude;
            });
            } else {
                alert('该浏览器不支持定位');
            }
         },
         now(){
             var date=new Date()
             var hou=date.getHours()
             var min=date.getMinutes()
             var sec=date.getSeconds()
            //  console.log(date,hou,min,sec);
             if(hou>10){
                 this.isCd=true
                  var shi=hou-10
                 this.time=shi+':'+min+':'+sec
             }else{
                 this.isCd=false
                 if(min>0||sec>0){
                     var shi=10-hou-1
                 }else{
                    var  shi=10-hou
                 }
                 if(sec>0){
                     var fen=60-min-1
                     var miao=60-sec
                 }else{
                     var fen=60-min
                     var miao=60-sec
                 }
                  this.time=shi+':'+fen+':'+miao
             }

         },
         qiand(){
             console.log(111);
             this.isQd=false
             this.qiandao='退签'
              var date=new Date()
             var hou=date.getHours()
             var min=date.getMinutes()
             var sec=date.getSeconds()
             if(!this.qianTime){
                 if(hou>10){

                     this.qianTime=hou+':'+min+':'+sec+'迟到'
                 }else{
                     this.qianTime=hou+':'+min+':'+sec
                 }
             }
             this.Isq=false
         },
         qj(){
             this.$router.push('/leave')
         }
   },
   mounted(){
    //    this.getCurrentCity()
       this.get()
        this.getTime()
        api.data(this.year,this.mounth,this.day).then(res=>{
            console.log(res);
            this.nl=res.data.result.nongli
        })
        setInterval(this.now,1000)
        // this.now()
   }
    

}
</script>

<style scoped>
.map {
   width: 100%;
  height: 300px;
  color: rgb(245, 245, 245);
}
.week{
    font-weight: bold;
    font-size: 0.4rem;
    margin: 0.2rem 0 0.1rem 0.4rem;
}
.fiex{
    display: flex;
    padding-left: 0.4rem;
}
.chi{
    flex: 1;
    font-size: 0.2rem;
}
.chis{
    flex: 1.5;
    font-size: 0.2rem;
}
.riqi{
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.2rem;
}
.chidao{
   padding: 0.2rem;
}
.chidao p{
  font-size: 0.16rem;
  color: #bbb;
}
.chidao div{
    border: 1px solid blue;
    width: 3rem;
    height: 1rem;
    border-radius: 0.1rem;
    margin-top: 0.1rem;
    font-size: 0.6rem;
    padding: 0.1rem;
    box-sizing: border-box;
    text-align: center;
}
.van-tabs__content{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* position: relative; */
    /* padding-top: 4rem; */
}
.qian{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: blue;
    text-align: center;
    line-height: 2rem;
    font-size: 0.6rem;
    /* position: absolute;
    left: 50%;
    top: 50%; */
    margin: 2rem 2rem 3rem 2.9rem;
}
.qianDao{
    /* padding-left: 0.2rem; */
    border-bottom: 1px solid #ccc;
    padding: 0.3rem 0rem;
    
}
.qianDao .week{
    margin: 0;
}
.size{
font-size: 0.4rem;
}
.size span{
    color: red;
    font-size: 0.2rem;
    margin-left: 0.2rem;
}
.shen{
    color: blue;
}
</style>